<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-实现异步请求</title>
    <!-- 导入 JQ 库文件 -->
    <script src="js/jquery-3.7.1.js"></script>
</head>
<body>
    <h1>Ajax-实现异步请求</h1>
    <button onclick="getMsg()">原生JS实现异步请求</button>
    <button id="btn1">jQuery实现异步请求</button>

    <p>响应结果：<span id="jg"></span></p>

    <script>
        // 向服务器发起异步请求，请求到 hello.do，获取响应数据
        function getMsg() {
            // 第一：实例化 XMLHttpRequest 对象
            var req = new XMLHttpRequest();

            // 第二：初始化HTTP请求参数 - req.open(请求方式,Servlet访问地址,是否异步)
            req.open("get","hello.do",true)

            // 第三：发送请求 - req.send([data])
            req.send() ;

            // 第四：设置回调函数 - 监听 readyState 属性
            req.onreadystatechange = function() {
                // req.readyState=4：服务器完成响应
                // req.status=200：Http响应状态，200表示ok
                if(req.readyState == 4 && req.status==200) {
                    // 第五：获取服务器响应的数据
                    var msg = req.responseText ;

                    // 第六：回显数据 - DOM
                    document.querySelector("#jg").innerText = msg ;
                }
            }

        }

        /*
            使用 JQ 实现异步请求 - jQuery == $
            注意：在 JQ 中，各选项的配置是以对象的方式进行配置，语法如下：

            {
                选项名称1：值 ,
                ...
                选项名称N:值
            }

         */
        $("#btn1").click(function(){
            $.ajax("hello.do",{
                type:'get',
                success:function(data){
                    // console.log(data)
                    $("#jg").text(data) ;
                }
            })
        }) ;

    </script>
</body>
</html>